<template>
	
	<el-form :inline="true">
		<el-form-item label="姓名">
			<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="selectAll()">查询</el-button>
		</el-form-item>
	</el-form>
	
	<el-table :data="dataList">
		<el-table-column prop="id" label="序号"></el-table-column>
		<el-table-column prop="name" label="姓名"></el-table-column>
		<el-table-column prop="age" label="年龄"></el-table-column>
		<el-table-column label="操作" width="210">
			<template #default="scope">
				{{scope.row.id}}
				<el-button type="primary" @click="handleEdit(scope.row.id)">修改</el-button>
				<el-button type="danger">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<SaveOrUpdate ref="saveOrUpdate" v-model="visible"></SaveOrUpdate>

	<el-pagination v-model:current-page="form.current" v-model:page-size="form.size" :total="total"
		:page-sizes="[10, 20, 30, 40]" @size-change="chandleSizeChange" @current-change="handleCurrentChange"
		layout="total, sizes, prev, pager, next, jumper">
	</el-pagination>
</template>

<script setup lang="ts">
	import { onMounted, ref, watch } from 'vue';
	import type { Ref } from 'vue';
	import { useselectPage } from '../common/common';
	import type { student, studentResult } from '../common/data/student';
	import SaveOrUpdate from '../common/SaveOrUpdate.vue';
	const { form, dataList, total, selectUrl, visible, selectList, selectAll, handleEdit, chandleSizeChange, handleCurrentChange } = useselectPage<student>(SaveOrUpdate);
	selectUrl.value = "/student/login";


	onMounted(() => {
		selectList();
		// const result = selectList<studentResult>();
		// // const resp = result as Promise<StudentResult>;
		// result.then((value) => {
		// 	console.log(value);
		// })
	});
	watch(dataList, () => {
		console.log(dataList.value[0].name);
	});
</script>

<style>
</style>